<script setup lang="ts">
import BaseInfo from './baseInfo.vue'
import UpdateInfo from './updateInfo.vue'
import UpdatePassword from './updatePassword.vue'

const activeName = ref('user')
</script>

<template>
  <div
    un-flex="~"
    un-h-full
    un-overflow-hidden
    un-gap="2.5"
  >
    <div
      class="tree"
      un-min-w="500px"
      un-h-full
    >
      <el-card>
        <template #header>
          <h4>基础信息</h4>
        </template>
        <BaseInfo />
      </el-card>
    </div>
    <div
      un-w="full"
      un-flex="~ col"
      un-h="full"
      un-overflow-hidden
    >
      <el-card body-style="padding: 5px 20px 20px 20px;">
        <el-tabs v-model="activeName">
          <el-tab-pane label="用户资料" name="user">
            <UpdateInfo />
          </el-tab-pane>
          <el-tab-pane label="修改密码" name="updatePassword">
            <UpdatePassword />
          </el-tab-pane>
          <!-- <el-tab-pane label="账号绑定" name="bind">
            Role
          </el-tab-pane> -->
        </el-tabs>
      </el-card>
    </div>
  </div>
</template>

<style lang="scss" scoped>

</style>
